<template>
    <div class="app-container">
        <!-- 条件查询区域 -->
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true"  label-width="100px">
            <el-form-item label="用户名" prop="userName">
                <el-input
                v-model="queryParams.userName"
                placeholder="请输入用户名"
                clearable
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickName">
                <el-input
                v-model="queryParams.nickName"
                placeholder="请输入用户昵称"
                clearable
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable>
                    <el-option
                        v-for="sex in sexList"
                        :key="sex.value"
                        :label="sex.label"
                        :value="sex.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input
                v-model="queryParams.phone"
                placeholder="请输入手机号码"
                clearable
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
                    <el-option
                        v-for="status in statusList"
                        :key="status.value"
                        :label="status.label"
                        :value="status.value"
                    />
                </el-select>
            </el-form-item>
            <!-- 按钮区 -->
            <el-form-item>
                <!-- 搜索按钮 -->
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <!-- 重置按钮 -->
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        
        <!-- 操作区域 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                >新增</el-button>
            </el-col>
        </el-row>

        <!-- 列表区域 -->
        <el-table v-loading="loading" :data="userList">
            <el-table-column label="ID" align="center" prop="userId" />
            <el-table-column label="用户名" align="center" prop="userName" />
            <el-table-column label="昵称" align="center" prop="nickName" />
            <el-table-column label="状态" align="center" prop="status">
                <!-- 使用开关切换 -->
                 <template slot-scope="scope">
                    <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                    />
                </template>
            </el-table-column>
            <el-table-column label="性别" align="center" prop="sex" >
                <!-- 使用插槽渲染 -->
                <template slot-scope="scope">
                    <el-tag
                    disable-transitions
                    >{{ scope.row.sex === '0' ? '男' : '女' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="手机号" align="center" prop="phone" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                >修改</el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <UserInfo :title="title"
                  :roleList="roleList"
                  :dialogData="dialogData"
                  :open="open"
                  @submitData="submitData"
                  @closeDialog="closeDialog"
                  >
        </UserInfo>

    </div>
</template>

<script>
import { getUserList, updateUserStatus, deleteUser,addUser,updateUser,getUserDetail} from "@/api/user";
import { getRoleList } from "@/api/role";
import {MessageBox} from 'element-ui';
import UserInfo from "@/views/UserInfo.vue";

export default {
  components: {UserInfo},
    data() {
        return {
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: null,
                nickName: null,
                sex: null,
                phone: null,
                status: null,
            },
            // 用户列表数据
            userList: [],
            // 遮罩层
            loading: false,
            // 弹出层标题
            title: "",
            // 弹窗数据
            dialogData:{},
            sexList: [
                { label: "男", value: "0" },
                { label: "女", value: "1" },
            ],
            statusList: [
                { label: "正常", value: "0" },
                { label: "停用", value: "1" },
            ],
            // 角色列表数据
            roleList: [],
            // 角色数据请求接口请求体
            queryRoleReqVo: {
                pageNum: 0,
            },
            // 数据总条数
            total: 0,
            // 是否显示弹出层
            open: false,
            dialogVisible: true
        }
    },
    created() {
        this.getList();
        this.getRoleList();
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery(){
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery(){
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                userName: null,
                nickName: null,
                sex: null,
                phone: null,
                status: null,
            };
            this.getList();
        },
        /** 新增数据 */
        handleAdd(){
          this.title = "新增用户";
          this.dialogData = {};
          this.open = true;
        },
        /** 修改数据 */
        handleUpdate(row){
          getUserDetail(row.userId).then(res => {
            this.dialogData = res.data.data;
            this.title = "修改用户";
            this.open = true;
          });
        },
        /** 删除数据 */
        handleDelete(row){
            // 确认删除
            const userIds = row.userId;
            // 组装提示语
            const content =  "是否确认删除编号为" + userIds + "的数据项？";
            // 弹出确认框
            MessageBox.confirm(content, "系统提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: "warning",
            }).then(function() {
                return deleteUser(userIds);
            }).then((res) => {
                this.getList();
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
            });
        },
        /**列表查询 */
        getList(){
            this.loading = true;
            getUserList(this.queryParams).then(res => {
                this.userList = res.data.data;
                this.total = res.data.total;
                this.loading = false;
            })
        },
        /** 用户状态修改 */
        handleStatusChange(row){
            updateUserStatus(row.userId).then(res => {
                if(res.data.code === 200){
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                }else{
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
                
            })
        },
        /** 分页大小改变 */
        handleSizeChange(val){
            this.queryParams.pageSize = val;
            this.getList();
        },
        /** 分页页数改变 */
        handleCurrentChange(val){
            this.queryParams.pageNum = val;
            this.getList();
        },
        /** 获取角色列表 */
        getRoleList(){
            getRoleList(this.queryRoleReqVo).then(res => {
                this.roleList = res.data.data;
            })
        },
        /** 提交表单数据 */
        submitData(inputForm){
          const requestData = inputForm.value;
          console.log(requestData)
          if(requestData.userId){
            updateUser(requestData).then(res => {
              if(res.data.code === 200){
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.reset();
                this.open = false;
                this.getList();
              }else{
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                });
              }
            });
          }else{
            addUser(requestData).then(res => {
              if(res.data.code === 200){
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.reset();
                this.open = false;
                this.getList();
              }else{
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                });
              }
            });
          }
        },
        /** 关闭弹出层 */
        closeDialog(){
          this.reset();
          this.open = false;
        },
        /** 表单重置 */
        reset(){
          this.dialogData = {};
        },
    },
}
</script>

<style scoped>
.app-container{
  display: flow;
}
</style>
